<template>
	<view class="content">
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" mode="dot"
			:dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex" :autoplay="true" :interval="3000"
				:circular="true">
				<swiper-item class="swiper-item" v-for="(item, index) in info" :key="index">
					<image class="image" :src="item.url" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="nav">
			<view class="nav-box">
				<image class="image" src="../../static/index/5.png" mode="aspectFit"></image>
				<view class="text">
					小程序搭建
				</view>
			</view>
			<view class="nav-box">
				<image class="image" src="../../static/index/6.png" mode="aspectFit"></image>
				<view class="text">
					多端构建
				</view>
			</view>
			<view class="nav-box">
				<image class="image" src="../../static/index/7.png" mode="aspectFit"></image>
				<view class="text">
					企业门户
				</view>
			</view>
			<view class="nav-box">
				<image class="image" src="../../static/index/8.png" mode="aspectFit"></image>
				<view class="text">
					ToB管理端
				</view>
			</view>
		</view>
		<view class="section">
			<view class="title">
				应用场景
			</view>
			<scroll-view class="scroll" scroll-x="true">
				<view class="scroll-view">
					<view class="scroll-box">
						<view class="blue">
							医疗
						</view>
						<view class="gray">
							微搭医疗服务
						</view>
					</view>
					<view class="scroll-box">
						<view class="blue">
							政务
						</view>
						<view class="gray">
							微搭政务服务
						</view>
					</view>
					<view class="scroll-box">
						<view class="blue">
							教育
						</view>
						<view class="gray">
							微搭教育服务
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="dynamic">
			<view class="header">
				<view class="left">
					最新动态
				</view>
				<view class="right">
					<view class="more">
						更多
					</view>
					<view class="jiantou">
						>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item">
					<view class="left">
						<view class="title">
							功能更新尧典：新增流程引擎功能，新增编辑器实现预览模式...
						</view>
						<view class="time">
							2024-05-01
						</view>
					</view>
					<view class="right">
						<image class="image" src="../../static/index/list1.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="title">
							腾讯云微撘低代码模板大赛即将开启
						</view>
						<view class="time">
							2024-05-01
						</view>
					</view>
					<view class="right">
						<image class="image" src="../../static/index/list2.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="title">
							腾讯云微撘低代码全面开启商业合作，有合作意向的看这里
						</view>
						<view class="time">
							2024-05-01
						</view>
					</view>
					<view class="right">
						<image class="image" src="../../static/index/list3.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="partner">
			<view class="header">
				合作伙伴
			</view>
			<view class="boxs">
				<view class="box">
					<image class="image" src="../../static/index/p1.png" mode="aspectFill"></image>
				</view>
				<view class="box">
					<image class="image" src="../../static/index/p2.png" mode="aspectFill"></image>
				</view>
				<view class="box">
					<image class="image" src="../../static/index/p3.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="">
				Copyright © 2021 - 2024 Tencent Cloud. All Right Reserved.
			</view>
			<view class="">
				weda 版权所有
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				info: [{
						colorClass: 'uni-bg-red',
						url: '/static/index/1.png',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: '/static/index/2.png',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: '/static/index/3.png',
						content: '内容 C'
					}
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				dotsStyles: {
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
				},
				swiperDotIndex: 0
			}
		},
		onLoad() {},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F2F4F8;
	}

	.nav {
		width: calc(100% - 32px);
		margin: 16px;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.nav-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: space-around;

			.image {
				width: 100%;
				height: 60px;
			}

			.text {
				font-size: 12px;
				color: rgb(135, 141, 150);
			}
		}
	}

	.section {
		margin: 16px;
		padding: 16px;

		border-radius: 10px;
		background-color: #fff;

		.title {
			font-weight: bold;
		}

		.scroll {
			height: 90px;

			.scroll-view {
				margin-top: 10px;
				width: fit-content;
				display: flex;

				.scroll-box {
					display: flex;
					width: 110px;
					height: 80px;
					margin-right: 5px;
					border-radius: 10px;
					padding-left: 10px;
					flex-direction: column;
					justify-content: center;
					background-size: 100%;
					.blue {
						color: #0F62FE;
					}

					.gray {
						font-size: 12px;
						color: rgb(135, 141, 150);
					}
				}

				.scroll-box:nth-child(1) {
					background-image: url("../../static/index/bg1.png");
				}

				.scroll-box:nth-child(2) {
					background-image: url("../../static/index/bg2.png");
				}

				.scroll-box:nth-child(3) {
					background-image: url("../../static/index/bg3.png");
				}
			}
		}
	}

	.dynamic {
		margin: 16px;
		padding: 16px;
		background-color: #fff;
		border-radius: 10px;

		.header {
			display: flex;
			justify-content: space-between;

			.left {

				font-size: 16px;
				font-weight: bold;
			}

			.right {
				display: flex;
				justify-content: flex-end;
				align-content: center;
				font-size: 12px;
				color: #7c848e;

				.more {
					font-size: 12px;
					color: #7c848e;
				}

			}
		}

		.list {
			margin-top: 20px;

			.item {
				margin-top: 20px;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					font-size: 12px;

					.time {
						margin-top: 10px;
						color: #7c848e;
					}
				}

				.right {
					.image {
						width: 96px;
						height: 64px;
					}
				}
			}

			.item:nth-child(1) {
				margin-top: 0;
			}
		}
	}

	.partner {
		margin: 16px;
		padding: 16px 16px 5px 16px;
		background-color: #fff;
		border-radius: 10px;

		.header {
			font-size: 16px;
			font-weight: bold;
		}

		.boxs {
			margin-top: 20px;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 5px;
			.box {
				min-width: 0;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: rgb(242, 244, 248) 0px 1px 10px 1px;
				.image {
					width: 80%;
					height: 27px;
				}
			}
		}
	}
	.bottom{
		width: 100%;
		height: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 11px;
		color: rgb(162, 169, 176);
	}

	.swiper-box {
		height: 160px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 160px;
		color: #fff;

		.image {
			width: 800rpx;
			height: 320rpx;
		}
	}


	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 160px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
</style>